<template>
  <el-select v-model="val" filterable placeholder="请选择" style="width: 100%" @change="change">
    <el-option
      v-for="item in data"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      <i :class="item.value" class="icon">&nbsp;{{item.value}}</i>
    </el-option>
  </el-select>
</template>

<script>
  export default {
    name: "Icon",
    props: {
      value: {
        type: String,
        default: ""
      },
    },
    data() {
      return {
        iconsTemplate: ["el-icon-info", "el-icon-error", "el-icon-success", "el-icon-warning", "el-icon-question", "el-icon-back", "el-icon-arrow-left", "el-icon-arrow-down", "el-icon-arrow-right", "el-icon-arrow-up", "el-icon-caret-left", "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-caret-right", "el-icon-d-arrow-left", "el-icon-d-arrow-right", "el-icon-minus", "el-icon-plus", "el-icon-remove", "el-icon-circle-plus", "el-icon-remove-outline", "el-icon-circle-plus-outline", "el-icon-close", "el-icon-check", "el-icon-circle-close", "el-icon-circle-check", "el-icon-circle-close-outline", "el-icon-circle-check-outline", "el-icon-zoom-out", "el-icon-zoom-in", "el-icon-d-caret", "el-icon-sort", "el-icon-sort-down", "el-icon-sort-up", "el-icon-tickets", "el-icon-document", "el-icon-goods", "el-icon-sold-out", "el-icon-news", "el-icon-message", "el-icon-date", "el-icon-printer", "el-icon-time", "el-icon-bell", "el-icon-mobile-phone", "el-icon-service", "el-icon-view", "el-icon-menu", "el-icon-more", "el-icon-more-outline", "el-icon-star-on", "el-icon-star-off", "el-icon-location", "el-icon-location-outline", "el-icon-phone", "el-icon-phone-outline", "el-icon-picture", "el-icon-picture-outline", "el-icon-delete", "el-icon-search", "el-icon-edit", "el-icon-edit-outline", "el-icon-rank", "el-icon-refresh", "el-icon-share", "el-icon-setting", "el-icon-upload", "el-icon-upload2", "el-icon-download", "el-icon-loading"],
        val: ""
      }
    },
    computed: {
      data() {
        let icons = []
        for (let i = 0; i < this.iconsTemplate.length; i++) {
          let obj = this.iconsTemplate[i]
          let icon = {
            value: obj,
            label: obj
          }
          icons.push(icon)
        }
        return icons
      },
    },
    created() {
      this.val = this.value
    },
    methods: {
      change(data) {
        this.$emit("change",data)
      }
    }
  }
</script>

<style scoped>
  .span {
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    color: #99a9bf;
  }

  .icon {
    font-size: 16px;
    margin-right: 5px;
    padding-top: 5px;
  }

</style>
